import { useContext, useEffect, useState } from 'react';
import ScrollBarLayoutNotScroll from '@/components/ScrollBarLayoutNotScroll';
import { Empty } from 'antd';
import { ChangeControllerContext } from '../common/useOAContext';
import { BGflowBusinessType } from '../common/Format';
import { DetailCheckListNotHandView } from './DetailCheckListNotHandView';
import { DetailCheckListHandNodeView } from './DetailCheckListHandNodeView';

export const DetailCheckListViewOA: React.FC = () => {
  /** 获取上下文 */
  const { styleFixCls, infoObj } = useContext(ChangeControllerContext);

  /**  保存审核信息 */
  const [taskNodeInfoObj, setTaskNodeInfoObj] = useState<Record<string, any>>({
    activitiTaskHandleList: [], //未办理 的任务
    activitiHisProcinstList: [], //已办理的任务
    flag: null,
  });

  /** 初始化处理流程数据 */
  useEffect(() => {
    if (infoObj?.paramObject && JSON.stringify(infoObj?.paramObject) != '{}') {
      let arr: any = null;
      let paramObject: Record<string, any> = infoObj?.paramObject;
      for (let k in paramObject) {
        if (k?.endsWith(BGflowBusinessType())) {
          arr = paramObject[k];
        }
      }
      setTaskNodeInfoObj({
        activitiTaskHandleList: arr ? arr.mactivitiTaskHandleList : [], //未办理 的任务
        activitiHisProcinstList: arr ? arr.mactivitiHisProcinstList : [], //已办理的任务
        flag: arr ? arr.flag : null,
      });
    } else {
      setTaskNodeInfoObj({
        activitiTaskHandleList: [], //未办理 的任务
        activitiHisProcinstList: [], //已办理的任务
        flag: null,
      });
    }
  }, [infoObj]);

  return (
    <div className="commonTabsBodyDom">
      <div className="tabsBodyInfoDom">
        <div className={`${styleFixCls}flowListView`}>
          <table cellSpacing="0" cellPadding="0" className={`${styleFixCls}workflowNodesTableTitle`}>
            <thead className={`${styleFixCls}workflowNodesTableTitle-tableTheadBox`}>
              <tr>
                <th style={{ width: '20%' }}>办理环节</th>
                <th style={{ width: '15%' }}>单位</th>
                <th style={{ width: '15%' }}>办理人</th>
                <th style={{ width: '15%' }}>办理意向</th>
                <th style={{ width: '20%' }}>办理意见</th>
                <th style={{ width: '15%' }}>时间</th>
              </tr>
            </thead>
          </table>
          <div className={`${styleFixCls}flowListView-workflowTbodyRootDiv`}>
            <ScrollBarLayoutNotScroll>
              {taskNodeInfoObj?.activitiTaskHandleList?.length > 0 || taskNodeInfoObj?.activitiHisProcinstList?.length > 0 ? (
                <table cellSpacing="0" cellPadding="0" style={{ width: '100%' }}>
                  <tbody>
                    <DetailCheckListNotHandView notHandTaskNode={taskNodeInfoObj?.activitiTaskHandleList} />
                    <DetailCheckListHandNodeView handNodeList={taskNodeInfoObj?.activitiHisProcinstList} />
                  </tbody>
                </table>
              ) : (
                <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="暂无数据！" />
              )}
            </ScrollBarLayoutNotScroll>
          </div>
        </div>
      </div>
    </div>
  );
};
